<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Popover - Basic</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>
  <script type="module">
    import { popoverController } from '../../../../dist/ionic/index.esm.js';
    window.popoverController = popoverController;
  </script>
<body>
  <ion-app>

    <ion-header>
      <ion-toolbar color="primary">
        <ion-buttons slot="secondary">
          <ion-button onclick="presentPopover({component: 'profile-page', event: event })">
            <ion-icon slot="icon-only" name="person"></ion-icon>
          </ion-button>
        </ion-buttons>
        <ion-title>Popover - Basic</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content class="ion-padding" id="content">
      <ion-button id="basic-popover" expand="block" onclick="presentPopover({ component: 'profile-page', event: event })">Show Popover</ion-button>
      <ion-button id="translucent-popover" expand="block" onclick="presentPopover({ component: 'translucent-page', event: event, translucent: true })">Show Translucent Popover</ion-button>
      <ion-button id="long-list-popover" expand="block" color="secondary" onclick="presentPopover({ component: 'list-page', event: event })">Show Long List Popover</ion-button>
      <ion-button id="no-event-popover" expand="block" color="danger" onclick="presentPopover({ component: 'profile-page' })">No Event Popover</ion-button>
      <ion-button id="custom-class-popover" expand="block" color="tertiary" onclick="presentPopover({ component: 'translucent-page', event: event, cssClass: 'my-custom-class' })">Custom Class Popover</ion-button>
    </ion-content>

    <ion-footer>
      <ion-toolbar color="primary">
        <ion-buttons slot="primary">
          <ion-button onclick="presentPopover({component: 'profile-page', event: event })">
            <ion-icon slot="icon-only" name="person"></ion-icon>
          </ion-button>
        </ion-buttons>
        <ion-title>Popover</ion-title>
      </ion-toolbar>
    </ion-footer>

  </ion-app>

  <style>
    .my-custom-class {
      --background: rgba(40, 173, 218, .6);
      --width: 300px;
      --box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .6);

      color: white;
    }
  </style>

  <script>
    async function presentPopover(opts) {
      const popover = await popoverController.create(opts);
      await popover.present();
    }

    class ProfilePage extends HTMLElement {
      constructor() {
        super();
      }

      connectedCallback() {
        this.innerHTML = `
          <ion-content>
            <ion-list>
              <ion-list-header><ion-label>Ionic</ion-label></ion-list-header>
              <ion-item><ion-label>Item 0</ion-label></ion-item>
              <ion-item><ion-label>Item 1</ion-label></ion-item>
              <ion-item><ion-label>Item 2</ion-label></ion-item>
              <ion-item><ion-label>Item 3</ion-label></ion-item>
            </ion-list>
          </ion-content>
        `;
      }
    }

    customElements.define('profile-page', ProfilePage);

    class ListPage extends HTMLElement {
      constructor() {
        super();
      }

      connectedCallback() {
        let items = '';
        for (var i = 0; i < 30; i++) {
          items += '<ion-item><ion-label>Item ' + i + '</ion-label></ion-item>';
        }

        this.innerHTML = `
          <ion-content>
            <ion-list>
              <ion-list-header><ion-label>Ionic</ion-label></ion-list-header>
              ` + items + `
            </ion-list>
          </ion-content>
        `;
      }
    }

    customElements.define('list-page', ListPage);

    class TranslucentPage extends HTMLElement {
      constructor() {
        super();
      }

      connectedCallback() {
        this.innerHTML = `
          <div class="ion-padding">
            <h1>Translucent Popover</h1>
          </div>
        `;
      }
    }

    customElements.define('translucent-page', TranslucentPage);
  </script>
</body>

</html>
